<template>
  <div id="test-direction" style="height:160px;"></div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  axisName: 'testDirection',
  components: {},
  watch: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById('test-direction'))
    var option = {
      radar: {
        indicator: [
          { name: '逻辑思维', max: 100 },
          { name: '项目相关', max: 100 },
          { name: '基础知识', max: 100 },
          { name: '理论基础', max: 100 },
          { name: '高阶技术', max: 100 }
        ],
        // 修改雷达图的大小
        radius: '65%',
        // shape: 'circle',
        // 分割的圆圈个数
        splitNumber: 6,

        // 分割的圆圈线条的样式
        splitLine: {
          lineStyle: {
            color: 'rgba(240, 240, 240, 0.5)'
          }
        },
        splitArea: {
          areaStyle: {
            color: 'rgba(199, 190, 201,0.8)'
          }
        }
      },
      series: [
        {
          // name: '北京',
          type: 'radar',
          // 填充区域的线条颜色
          lineStyle: {
            opacity: 0
          },
          data: [[80, 89, 65, 60, 80]],
          // 设置图形标记 （拐点）
          symbol: 'circle',
          // 这个是设置小圆点大小
          symbolSize: 0,
          // 设置小圆点颜色
          // itemStyle: {
          //   color: '#fff'
          // },
          // 让小圆点显示数据
          // label: {
          //   show: true,
          //   fontSize: 10
          // },
          // 修饰我们区域填充的背景颜色
          areaStyle: {
            color: '#2ec7c9',
            opacity: 1
          }
        }
      ]
    }
    myChart.setOption(option)
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function() {
      // 让我们的图表调用 resize这个方法
      myChart.resize()
    })
  },
  methods: {}
}
</script>
<style lang="less" scoped>
</style>
